<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>蘑订APP抽奖</title>
<link rel="stylesheet" href="css/mui.min.css" />
<link rel="stylesheet" href="css/lottery.css" />
<script src="js/vue.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
</head>
<body>

<div class="lottery-box" id="app">
	<h1 class="title">蘑订APP抽奖</h1>
	<div class="lottery">
		<div class="lottery-item">
			<div class="lottery-start">
				<div class="box gray" v-if="isStart===0">
					<p>活动未开始<br>或者<br>活动已过期</p>
				</div>
				<div class="box" @click="startLottery" v-if="isStart===1">
					<p><b style="color: #FFFFFF;">抽奖</b></p>
					<p>您还有 {{counts}} 次机会</p>
				</div>
			</div>
			<ul>
				<li v-for="(item,i) in list" :class="i==index?'on':''">
					<div class="box">
						<p><img :src="item.img" alt=""></p>
						<p>{{item.title}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>  
	<!-- 中奖弹窗 -->
	<div class="mask" v-if="showToast"></div>
	<div class="lottery-alert" v-if="showToast">
		<h1>恭喜您</h1>
		<p><img src="img/j2.png" alt=""></p>
		<h2>获得{{list[index].title}}</h2>
		<div class="btnsave" @click="close(index)">确定</div> 
	</div>  
</div>
<script src="js/lottery.js"></script>
</body>
</html>